import Dialog from "../../miniprogram_npm/vant-weapp/dialog/dialog"
import Wxml2Canvas from 'wxml2canvas'; 
import Notify from '../../miniprogram_npm/vant-weapp/notify/notify';
var app=getApp()
Page({
  data: {
    title:"",
    outline:"",
    content:"",
    show: false,
    imgUrl:"",
    length:-1
  },
  a(){
    wx.navigateTo({
      url: '/pages/creator/creator',
    })
  },
  publish(){
    app.globalData.title=this.data.title
    app.globalData.outline=this.data.outline
    app.globalData.imgurl=this.data.imgUrl
    wx.navigateTo({
      url: `../publish/publish?title=${this.data.title}&&outline=${this.data.outline}&&imgurl=${this.data.imgUrl}`,
    })
    console.log(`title=${this.data.title}&&outline=${this.data.outline}&&imgurl=${this.data.imgUrl}`)
  },
  close(){
    this.setData({ show: false });
  },

  onClose() {
    this.savePoster(this.data.imgUrl)
    this.setData({ close: false });
  },

  info(){
    Dialog.alert({
      theme: 'round-button',
      messageAlign:"left",
      title: '剧本编辑小贴纸',
      message: `第一部分：封面。
      要求：
      1，内容：剧本类型、标题、作者姓名。
      2，格式：封面排版单独占一页。剧本类型左上角顶头，标题居中；作者姓名、时间等相关内容居中。
      参考例子:
      电影剧本
      XXXXX
      作者：张三
      时间：20xx 年 x 月 x 日
      第二部分：人物简介
      要求：
      1，内容：写清楚人物姓名、年纪、性别、性格等基本信息
      参考例子：
      陈玉河：
      男，60 岁左右，性格倔强，认死理，抠门贪小便宜。退休前先是再中华书局做拣字工，数字印刷普及后，工种消失后，给印刷厂看仓库。八年前妻子过世，用做风筝的方式怀念妻子。
      第三部分：故事梗概。
      可简单对选题来源、创作灵感、风格样式、构思与表达等与剧本作业相关的内容加以阐述。
      第五部分：剧本正文。
      格式要求：
      1，场标：场次+地点+时间+内外景，黑体小四号字顶头。场号后面加“、”。
      场与场之间空两行。`
    }).then(() => {
      // on close
    });
  },
  onchange1(e){
    this.setData({
      title:e.detail
    })
    console.log(this.data.title)
  },
  onchange2(e){
    this.setData({
      outline:e.detail
    })
  },
  onchange3(e){
    this.setData({
      content:e.detail
    })
  var str= this.data.content.split('\n')
  console.log(str.length)
  if(str.length>=20){
    this.setData({
      length:this.data.content.length
    })
    Notify({
      text: '想写的太多了，那就分上下集叭',
      duration: 1000,
      // selector: '#custom-selector',
      backgroundColor: '#FEAA33'
    });
  }
  },

//动态获取画制作元素的宽高
drawCanvas() {
//   const query = wx.createSelectorQuery().in(this);
//   query.select('#wxml-canvas').fields({
//       size: true,
//       scrollOffset: true
//   }, data => {
//       let width = data.width;
//       let height = data.height;
//       this.width = width;
//       this.height = height;
//       setTimeout(() => {
//           this.draw()
//       }, 1500);
// }).exec();
},
draw() {
  let that = this
  this.setData({
    show:true
  })
  //创建wxml2canvas对象
  let drawImage = new Wxml2Canvas({
    element: 'share', // canvas节点的id,
    obj: that, // 在组件中使用时，需要传入当前组件的this
    width:300, // 宽高
    height: 400,
    background: 'white', // 默认背景色
    progress(percent) { // 绘制进度
      // console.log(percent)
    },
    finish(url) {
      that.setData({
        imgUrl:url
      })
      console.log("创建的图片", that.data.imgUrl);

      // that.savePoster(url)
    },
    error(res) {
      console.log(res);
      // uni.hideLoading()
      // 画失败的原因
    }
  }, this);
  var data = {
    //直接获取wxml数据
    list: [
      {type: 'text',
      x: 10,
      y: 10,
      text:`《${that.data.title}》`,
      style: {
        width:"285",
        fontSize:"18px",
        fontFamily:'黑体',
      }},
      {type: 'text',
      x: 10,
      y: 30,
      text:'',
      style: {
        width:285,
        fontSize:"15px",
        fontFamily:'黑体',
        lineClamp:20
      },
    },

    // {  type:'wxml',
    //   class: '.draw_canvas', // draw_canvas指定待绘制的元素
    //   limit: '.draw_canvas', // 限定绘制元素的范围，取指定元素与它的相对位置
    //   x: 0,
    //   y: 0}
      ]
  }
  var str = that.data.content.split('\n')
  var arr=[]
  str.forEach((item,index)=>{
    var num=Math.ceil(item.length/18)
    if(index==0){
      arr[index]=num
      let obj={type: 'text',
      x: 10,
      y:35,
      text:item,
      style: {
        width:285,
        fontSize:"15px",
        fontFamily:'黑体',
        lineClamp:num
      },
    }
    data.list.push(obj)
    }
    else{
      arr[index]=parseInt(num)+parseInt(arr[index-1])
      let obj={type: 'text',
        x: 10,
        y:35+18*arr[index-1],
        text:item,
        style: {
          width:285,
          fontSize:"15px",
          fontFamily:'黑体',
          lineClamp:num
        },
    }
    data.list.push(obj)
    }
  })
  
//传入数据，画制canvas图片
drawImage.draw(data, this);
},
savePoster(url) {
  console.log(url)
  const that = this
  wx.saveImageToPhotosAlbum({
      filePath:url,
      success: function() {
          wx.showToast({
              title: '保存成功',
              icon: 'none',
              duration: 1500
          });
      },
      fail(err) {
        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
          wx.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            showCancel: false,
            success: modalSuccess => {
              wx.openSetting({
                success(settingdata) {
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      wx.saveImageToPhotosAlbum({
                          filePath: that.data.imgUrl,
                          success: function () {
                            wx.showToast({
                              title: '保存成功',
                              icon: 'success',
                              duration: 2000
                            })
                          },
                      })
                  } else {
                      wx.showToast({
                          title: '授权失败，请稍后重新获取',
                          icon: 'none',
                          duration: 1500
                      });
                  }
                }
              })
            }
          })
        }
      }
    })
},

onLoad(){
},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})